<template>
	<scroll-view scroll-y class="detail__view">
		<image class="cover" :src="detailData.thumb || 'defImg'" mode="aspectFit" />
		
		<view class="container">
			
			<!-- 信息模块 -->
			<view class="info__container">
				<view class="info__title">{{ detailData.title }}</view>
				<view class="info__subTit">【69一抽·保底3隐藏·99抽】</view>
				<view class="info__tip__con">
					<text>下单自动锁箱{{ detailData.lockBoxTime }}s</text>
				</view>
				<view class="info__footer__con">
					<view class="info__price__con">
						<text class="prefix">￥</text>
						<text class="price">{{ detailData.price }}</text>
						<text class="unit">/张</text>
					</view>
					<view class="info__num">剩{{ detailData.allNum }}张/共{{ detailData.allSold }}张</view>
				</view>
			</view>
			
			<!-- 锁箱倒计时 -->
			<view class="lock__box__container">
				<view class="container">
					<image src="../../uni_modules/HM-slotMachine/static/1.png" mode="aspectFill" />
					<view>
						某某人锁箱剩余<text>77</text>s
					</view>
				</view>
			</view>
			
			<!-- 主内容模块 -->
			<view class="content__container">
				<view class="top__operate__container">
					<view class="info__operate__container">
						<view>
							<view @click="recordPopup = true">开赏记录</view>
							<view>购买说明</view>
						</view>
						<view>试玩</view>
					</view>
					<view class="switch__operate__container">
						<view @click="initData(before)">上一箱</view>
						<view>第33箱/共{{ roomList.length }}箱</view>
						<view @click="initData(after)">下一箱</view>
					</view>
				</view>
				<u-row class="list__container">
					<u-col :span="4" v-for="item of awardList" :key="item.id">
						<view class="item__container" @click="shopPopup = true">
							<view class="top__left__tag">{{ item.num }}/{{ item.sold }}</view>
							<image :src="item.thumb" mode="aspectFill" />
							
							<view class="info__container">
								<view class="title__container">
									<view class="tag" :style="{ background: item.mark_color }">{{ item.mark_title }}赏</view>
									<view class="title">{{ item.title }}</view>
								</view>
								<view class="price">零售价：{{ item.price }}元</view>
								<view class="desc">概率：{{ item.show_rate }}%</view>
							</view>
						</view>
					</u-col>
				</u-row>
			</view>
			
		</view>
		
		<view class="footer__container">
			<view class="btns__container">
				<view>欧一发</view>
				<view>欧三发</view>
				<view>欧十发</view>
				<view>刷新</view>
			</view>
			<view class="sub__container">
				<view @click="roomPopup = true">换箱</view>
				<view @click="onStart">抱箱</view>
			</view>
		</view>
		
		<!-- 商品弹窗 -->
		<u-popup v-model="shopPopup" mode="bottom" height="1200rpx" class="shop__popup">
			<u-tabs :list="shopTabs" :current="shopCurTab" @change="(index) => shopCurTab = index" item-width='50%' />
			
			<!-- 商品列表 -->
			<scroll-view scroll-y v-if="!shopCurTab" class="list__container">
				<view class="item__container">
					<image src="../../uni_modules/HM-slotMachine/static/1.png" mode="aspectFill" />
					<view class="info__container">
						<view class="title">
							Zoraa寻找小蜜蜂·异色掉卡
						</view>
						<view class="desc__container">
							<view>
								<view class="price">参考价格￥<text>59.00</text></view>
								<text>剩余2件</text>
							</view>
							<view>只赠不售</view>
						</view>
					</view>
				</view>
			</scroll-view>
			
			<!-- 商品详情 -->
			<scroll-view scroll-y v-if="!!shopCurTab" class="detail__container">
				<image src="../../uni_modules/HM-slotMachine/static/1.png" mode="widthFix" />
			</scroll-view>
			
			<view class="clone__btn" @click="shopPopup = false">关闭详情</view>
		</u-popup>
		
		<!-- 开赏记录 -->
		<u-popup v-model="recordPopup" mode="bottom" height="1200rpx" class="record__popup" closeable>
			<view class="title">开赏记录</view>
			
			<view class="tags__filter__con">
				<view class="tag__con active">全部</view>
				<view class="tag__con">免单</view>
			</view>
			
			<scroll-view scroll-y class="record__list__container">
				<view class="item__container">
					<view class="content__con">
						<view>
							<image class="round" src="../../uni_modules/HM-slotMachine/static/1.png" mode="aspectFill" />
							<text>【第63张】SalHkAR5</text>
						</view>
						<view>
							10/30 13:38:44
						</view>
					</view>
					<view class="content__con">
						<view>
							<image src="../../uni_modules/HM-slotMachine/static/1.png" mode="aspectFill" />
							<text>音响·秋雨之声</text>
						</view>
						<view>
							C赏 x1
						</view>
					</view>
				</view>
			</scroll-view>
		</u-popup>
		
		<!-- 切换房间窗口 -->
		<u-popup v-model="roomPopup" mode="bottom" height="1200rpx" class="room__popup" closeable>
			<view class="title">切换房间</view>
			
			<scroll-view scroll-y class="room__list__container">
				<view class="item__container">
					<view>
						<image src="../../uni_modules/HM-slotMachine/static/1.png" mode="aspectFill" />
						<view>第一箱</view>
					</view>
					<view>
						A赏0/2 A赏0/2 A赏0/2 A赏0/2 A赏0/2 A赏0/2 A赏0/2 A赏0/2 A赏0/2 A赏0/2 A赏0/2 A赏0/2 
					</view>
				</view>
			</scroll-view>
		</u-popup>
	</scroll-view>
</template>

<script>
	// 公共接口校验
	const successFun = (res, callback) => {
		const { code, data } = res;
		if (code != 200) return;
		callback && callback(data);
	}
	
	export default {
		data() {
			return {
				id: '',
				detailData: {},
				awardList: [],
				
				shopPopup: false,
				shopTabs: [
					{ name: '商品列表（15）'},
					{ name: '商品详情' },
				],
				shopCurTab: 0,
				
				recordPopup: false,
				
				roomPopup: false,
				
				before: null,
				after: null,
				roomList: [],
				
				url: {
					detail: '/v1/box/info',
					listChange: '/v1/box/listChange',
				}
			}
		},
		onLoad(option) {
			const { id } = option;
			
			this.id = id;
			this.initData(id);
		},
		methods: {
			// 初始化
			initData(id) {
				const success = (res) => successFun(res, (data) => {
					const { awardList, box } = data;
					
					this.awardList = awardList;
					this.detailData = box;
					console.log(box, awardList)
				})
				const successListChange = (res) => successFun(res, (data) => {
					const { list, ...rest } = data;
					Object.assign(this, rest);
					this.roomList = list;
					console.log(data)
				})
				this.req({ url: this.url.detail, data: { id }, success })
				this.req({ url: this.url.listChange, data: { id }, success: successListChange })
			},
			
		}
	}
</script>

<style scoped lang="scss">
	$def-padding: 20rpx;
	$def-margin: 20rpx;
	$def-radius: 20rpx;
	$fs-lx: 36rpx;
	$fs-nx: 32rpx;
	$fs-sx: 28rpx;
	$btn-bg: linear-gradient(45deg, #DEF2CE 0%, #AEEF8B 100%);
	
	@mixin padding {
		padding: $def-padding;
		box-sizing: border-box;
	};
	
	@mixin flex ($jc: center, $ai: center) {
		display: flex;
		justify-content: $jc;
		align-items: $ai;
	};
	
	@mixin btn {
		padding: $def-padding 40rpx;
		background: $btn-bg;
		border-radius: $def-radius;
	}
	
	.detail__view {
		height: 100vh;
		background-color: #F4F6F5;
		padding-bottom: 240rpx;
		box-sizing: border-box;
		
		& .cover {
			height: 400rpx;
			background-color: $uni-bg-color;
		}
		
		& .container {
			@include padding;
			
			// start 信息模块
			& .info__container {
				@include padding;
				background: white;
				border-radius: $def-radius;
				
				.info__title {
					font-size: $fs-lx;
					font-weight: bold;
					margin-bottom: $def-margin;
				}
				
				.info__tip__con {
					margin-top: 20rpx;
					font-size: 24rpx;
					text {
						display: inline;
						padding: 2rpx 10rpx;
						border: 1px solid black;
						border-radius: 10rpx;
					}
				}
				
				.info__footer__con {
					margin-top: $def-margin;
					@include flex(space-between);
					
					.prefix {
						font-size: $fs-nx;
					}
					
					.price {
						font-size: $fs-lx;
					}
				}
			}
			// end 信息模块
			
			& .lock__box__container {
				@include flex;
				& .container {
					padding: 10rpx $def-padding;
					border-radius: 50rpx;
					background-color: white;
					margin: auto;
					box-sizing: border-box;
					display: flex;
					align-items: center;
					margin-top: $def-margin;
					
					& image {
						width: 45rpx;
						height: 45rpx;
						border-radius: 50%;
						margin-right: 10rpx;
					}
					
					& > view {
						@include flex;
					}
					
					& text {
						color: red;
						font-size: $fs-lx;
						font-weight: bold;
					}
				}
			}
			
			// start 主内容模块
			& .content__container {
				// @include padding;
				padding: $def-padding 10rpx;
				box-sizing: border-box;
				background: white;
				border-radius: $def-radius;
				margin-top: $def-margin;
				
				& .top__operate__container {
					margin-bottom: $def-margin;
					.info__operate__container {
						@include flex(space-between);
						
						& > view:first-child {
							display: flex;
							width: 50%;
							& > view {
								width: 50%;
							}
						}
						
						& > view:last-child {
							background-color: #000000;
							padding: 15rpx 40rpx;
							border-radius: $def-radius;
							color: white
						}
					}
					
					.switch__operate__container {
						@include flex(space-between);
						margin-top: $def-margin;
						
						& > view {
							@include btn;
						}
					}
				}
			
				& .list__container {
					.item__container {
						position: relative;
						border-radius: $def-radius 10rpx 10rpx 10rpx;
						box-shadow: 0 0 10px 0 rgba(0, 0, 0, 0.15);
						margin-bottom: $def-margin;
						.top__left__tag {
							position: absolute;
							top: 0;
							left: 0;
							background: $btn-bg;
							border-top-left-radius: $def-radius;
							border-bottom-right-radius: $def-radius;
							font-size: 22rpx;
							padding: 10rpx 20rpx;
						}
						
						& > image {
							width: 100%;
							height: 200rpx;
							border-radius: unset;
							border-top-left-radius: $def-radius;
							border-top-right-radius: 10rpx;
							// background-color: red;
						}
					}
					& .info__container {
						padding: 10rpx;
						padding-bottom: $def-padding;
						font-size: 20rpx;
						line-height: 35rpx;
						color: #848484;
						.title__container {
							display: flex;
							align-items: center;
							margin-bottom: 8rpx;
							.tag {
								background-color: #eb5b51;
								font-size: 16rpx;
								color: white;
								padding: 0rpx 10rpx;
								border-radius: 5rpx;
								margin-right: 10rpx;
							}
							.title {
								font-size: 24rpx;
								color: #000000;
								flex: 1;
								font-weight: bold;
								overflow: hidden;
								white-space: nowrap;
								text-overflow: ellipsis;
							}
						}
					}
				}
			}
			
		}
		
		// 底部容器
		& .footer__container {
			position: fixed;
			bottom: 0;
			left: 0;
			right: 0;
			padding: $def-padding;
			padding-bottom: 40rpx;
			background-color: white;
			
			.btns__container {
				display: flex;
				justify-content: space-between;
				align-items: center;
				margin-bottom: $def-margin;
				& > view {
					@include btn;
				}
			}
			
			.sub__container {
				display: flex;
				
				& > view:first-child {
					background-color: #f0f0f0;
					width: 30%;
					margin-right: 20rpx;
					padding: $def-padding 0;
					border-radius: 50rpx;
					@include flex;
				}
				
				& > view:last-child {
					background-color: #000000;
					color: white;
					flex: 1;
					border-radius: 50rpx;
					@include flex;
				}
			}
		}
		
		// 商品窗口
		& .shop__popup {
			& .list__container {
				@include padding;
				height: calc(1200rpx - 90rpx);
				
				.item__container {
					display: flex;
					align-items: center;
					border-bottom: 1px solid #84848422;
					padding: 10rpx 0;
					box-sizing: border-box;
					image {
						width: 180rpx;
						height: 180rpx;
						border-radius: $def-radius;
						border: 1px solid #848484;
						margin-right: $def-margin;
					}
					
					& .info__container {
						flex: 1;
						line-height: 60rpx;
						
						.title {
							font-weight: bold;
						}
						
						& .desc__container {
							display: flex;
							justify-content: space-between;
							
							& > view:first-child {
								display: flex;
								& .price {
									color: #CB4D6B;
									text {
										font-weight: bold;
									}
								}
								
								& > text {
									margin-left: $def-margin;
									color: #848484;
								}
							}
							
							& > view:last-child {
								color: #848484;
							}
						}
					}
				}
			}
		
			& .detail__container {
				height: calc(1200rpx - 90rpx);
				& > image {
					width: 100%;
				}
			}
			
			& .clone__btn {
				position: fixed;
				bottom: 40rpx;
				left: 50%;
				padding: $def-padding 0;
				width: 50%;
				color: white;
				background-color: #000000;
				border-radius: 50rpx;
				text-align: center;
				font-weight: bold;
				transform: translateX(-50%);
			}
		}
		
		// 开赏记录窗口
		& .record__popup {
			& .title {
				font-size: $fs-lx;
				font-weight: bold;
				text-align: center;
				padding: $def-padding;
			}
			
			& .tags__filter__con {
				display: flex;
				padding: $def-padding 40rpx;
				.tag__con {
					border: 1rpx solid #E1E1E1;
					padding: 8rpx 25rpx;
					font-size: $fs-sx;
					box-sizing: border-box;
					border-radius: 50rpx;
					margin-right: $def-margin;
					&.active {
						background-color: #fc7640;
						color: white;
					}
				}
			}
			
			& .record__list__container {
				height: 950rpx;
				@include padding;
				
				& .item__container {
					border: 4rpx solid #999999;
					padding: 30rpx $def-padding;
					box-sizing: border-box;
					line-height: 60rpx;
					margin-bottom: $def-padding;
					.content__con {
						@include flex(space-between);
						
						& view:first-child {
							display: flex;
							align-items: center;
							
							& image {
								margin-right: 10rpx;
								width: 50rpx;
								height: 50rpx;
								
								&.round {
									border-radius: 50%;
								}
							}
						}
					}
				}
			}
		}
	
		& .room__popup {
			& .title {
				font-size: $fs-lx;
				font-weight: bold;
				text-align: center;
				padding: $def-padding;
			}
			
			& .room__list__container {
				height: 1000rpx;
				@include padding;
				& .item__container {
					border: 4rpx solid #999999;
					padding: $def-padding;
					box-sizing: border-box;
					margin-bottom: $def-margin;
					display: flex;
					
					& > view:first-child {
						width: 30%;
						margin-right: $def-margin;
						display: flex;
						flex-direction: column;
						align-items: center;
						justify-content: center;
						
						& image {
							width: 50rpx;
							height: 50rpx;
							margin-bottom: 10rpx;
						}
					}
				}
			}
		}
	}
</style>